<template>
  <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
    <div slot="content">
      <div
        v-for="box in shipmentBox"
        :key="box.id"
      >
        <template v-if="box.boxType === 1">
          {{ $t('shipment.below150') }}：{{type === 'EX' ? box.exBoxNum : box.rlBoxNum}}
        </template>
        <template v-else-if="box.boxType === 2">
          {{ $t('shipment.above150') }}：{{type === 'EX' ? box.exBoxNum : box.rlBoxNum}}
        </template>
        <template  v-else-if="box.boxType === 4">
          {{ $t('shipment.整箱') }}：{{type === 'EX' ? box.exBoxNum : box.rlBoxNum}}
        </template>
        <template v-else-if="box.boxType === 5">
          {{ $t('shipment.混箱') }}：{{type === 'EX' ? box.exBoxNum : box.rlBoxNum}}
        </template>
        <template v-else-if="box.boxType === 6">
          {{ $t('shipment.直发箱') }}：{{type === 'EX' ? box.exBoxNum : box.rlBoxNum}}
        </template>
      </div>
    </div>
    <div>{{boxNum}}</div>
  </el-tooltip>
</template>

<script>

export default {
  name: "ToolTipShipmentBox",
  computed: {
    boxNum(){
      return this.shipmentBox.reduce((prev,cur)=>{
        return prev + (this.type === 'EX' ? cur.exBoxNum : cur.rlBoxNum)
      },0)
    }
  },
  props: {
    shipmentBox: {
      type: Array,
      required: true,
      default(){
        return []
      }
    },
    type: {
      type: String,
      default: 'EX', // EX 预计 RL实际
    }
  },
  data(){
    return {
    }
  },
  methods:{

  }
}
</script>

<style scoped lang="scss">

</style>
